<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        //  class Content extends React.Component{
        //     state={
        //         isLove:true,
        //         count:0
        //     }
        //     render(){
        //         const {isLove,count}=this.state
        //         return (
        //             <div>
        //                 <button onClick={this.handle}>哈哈哈</button> 
        //                 <h1>{isLove?'条条的啊呜':'papapiu'}</h1>
        //                 <h2>{count}</h2>
        //             </div>
        //         )
        //     }
        //     handle=()=>{
        //         //组件实例上有一个setState方法,接受一个对象,会把接受的对象和原有的state对象进行合并,并重新渲染
        //         //千万不要直接修改state,而是使用setState
        //         this.setState({count:99,isLove:false});
        //         console.log(this.state.count,'this.state.count')//0 
        //         //setState可能是异步的(出于性能考虑,会等待一下,把多个setState合并成一次更新）
        //     }
        //  }

        //  const root = ReactDOM.createRoot(document.querySelector('#app')).render(<Content/>)
            class Content extends React.Component{
                state={
                    isLove:true,
                    count:0
                }
                render(){
                    console.log("----render----");
                    const {isLove,count}=this.state
                    return (
                        <div>
                            <button onClick={this.handle}>点击改变</button>
                            <p>{isLove?'♥':'🤮'}</p>
                            <h1>{count}</h1>
                        </div>
                    )
                }
                handle = ()=>{
                    this.setState({isLove:false})
                    this.setState({count:99})
                }
            }
            const root = ReactDOM.createRoot(document.getElementById('app')).render(<Content/>)

    </script>
</body>
</html>